<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    #mouse {
      display: inline-block;
      cursor: pointer;
      margin: 0;
    }

    #mouse:focus {
      outline: 1px dashed black;
    }
  </style>
</head>

<body>

  <p>用鼠标点击以下老鼠，并使用键盘的方向键移动它。</p>

  <pre id="mouse">
 _   _
(q\_/p)
 /. .\
=\_t_/=   __
 /   \   (
((   ))   )
/\) (/\  /
\  Y  /-'
 nn^nn
</pre>


  <script>
    const mouseEl = document.querySelector('#mouse')
    mouseEl.tabIndex = 0

    mouseEl.addEventListener('focus', (e) => {
      const { offsetWidth, offsetHeight } = mouseEl
      mouseEl.style.position = 'fixed'
      document.addEventListener('keydown', (e) => {
        e.preventDefault()
        const code = e.code
        switch(code) {
          case 'ArrowRight':
            {
              const left = mouseEl.style.left ? parseInt(mouseEl.style.left) : 0
              mouseEl.style.left = left + offsetWidth + 'px'
            }
            break;
          case 'ArrowUp':
            {
              const top = mouseEl.style.top ? parseInt(mouseEl.style.top) : 0
              mouseEl.style.top = top - offsetHeight + 'px'
            }
            break;
          case 'ArrowDown':
            {
              const top = mouseEl.style.top ? parseInt(mouseEl.style.top) : 0
              mouseEl.style.top = top + offsetHeight + 'px'
            }
            break;
          case 'ArrowLeft':
            {
              const left = mouseEl.style.left ? parseInt(mouseEl.style.left) : 0
              mouseEl.style.left = left - offsetWidth + 'px'
            }
            break;
        }
      })
    })
  </script>

</body>

</html>